<template>
  <div class="right">
    <el-card shadow="hover">
      <template #header>
        <div class="title">分类销售排行</div>
        <el-radio-group v-model="radio" @change="handlechange">
          <el-radio-button label="品类"></el-radio-button>
          <el-radio-button label="商品"></el-radio-button>
        </el-radio-group>
      </template>
      <div class="box">
        <v-chart :option="option"></v-chart>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCategoryData } from "@/api/index";
export default {
  data() {
    return {
      categoryData: {},
      radio: "品类",
      option: {},
      count: [],
      data: [],
    };
  },
  methods: {
    handlechange(val) {
      this.radio = val;
      if (this.radio === "品类") {
        this.renderChart(this.data[0], this.count[0]);
      } else {
        this.renderChart(this.data[1], this.count[1]);
      }
    },
    renderChart(data, count) {
      this.option = {
        title: {
          text: "品类分布",
          textStyle: {
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            const colorDot =
              '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:12px;height:12px;background-color:' +
              params.color +
              '"></span>';
            const br = "<br>";
            const content =
              params.seriesName +
              br +
              colorDot +
              params.name +
              br +
              colorDot +
              "销售额:" +
              params.value;

            return content;
          },
        },
        legend: {
          orient: "vertical",
          left: "650",
          formatter: function (name) {
            const item = data.find((item) => item.name === name);
            return `${name}|${item.value}`;
          },
        },
        series: [
          {
            name: "品类分布",
            type: "pie",
            radius: ["50%", "65%"],
            center: ["50%", "50%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 10,
            },
            data: data,
          },
        ],
        graphic: [
          {
            //环形图中间添加文字
            type: "text",
            left: "center",
            top: "center",
            style: {
              text: `累计订单量\n`,
              fill: "rgb(180, 180, 180)",
              textAlign: "center",
              fontSize: 14,
              lineHeight: 20,
            },
          },
          {
            //环形图中间添加文字
            type: "text",
            left: "center",
            top: "center",
            style: {
              text: `\n\n${count}`,
              textAlign: "center",
              fontSize: 30,
              lineHeight: 20,
            },
          },
        ],
      };
    },
  },
  async mounted() {
    const res = await getCategoryData();
    this.categoryData = res.data;
    this.data[0] = this.categoryData.data1.map((item) => {
      return {
        name: item.title,
        value: item.value,
      };
    });
    this.data[1] = this.categoryData.data2.map((item) => {
      return {
        name: item.title,
        value: item.value,
      };
    });
    this.count[0] = this.data[0].reduce((acc, cur) => acc + cur.value, 0);
    this.count[1] = this.data[1].reduce((acc, cur) => acc + cur.value, 0);
    this.renderChart(this.data[0], this.count[0]);
  },
};
</script>

<style lang="scss" scoped>
.right {
  flex: 1;
  .box {
    position: relative;
    width: 817px;
    height: 518px;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    cursor: default;
  }
  .title {
    font-weight: 600;
  }
  :deep(.el-card__header) {
    position: relative;
    .el-radio-group {
      position: absolute;
      right: 2%;
      top: 10%;
    }
  }
}
</style>